<template>
  <div id="recommend">
    <div class="atUp">
      <div>关注更新</div>
    </div>
    <van-grid class="atUp-music">
      <van-grid-item
        v-for="(item, index) in updataList.slice(3, 9)"
        :key="index"
        @click="goMv(item)"
      >
        <div>
          <van-image round fit="cover" :src="item.cover" width="100px" />
        </div>
        <div style="height: 10px">{{ item.artists[0].name }}</div>
      </van-grid-item>
    </van-grid>
    <pushView :jinList="updataList" :pushViewRows="pushViewRows"></pushView>
    <slideshowPlay :newestList="newestList"></slideshowPlay>
    <playlists
      :playlistsRows="playlistsRows"
      :playList="item"
      v-for="(item, index) in playList"
      :key="index"
    ></playlists>
  </div>
</template>

<script>
import { getRecommendMv, getNewestMV } from "../../network/api/VideoApi";
import pushView from "@/views/video/pushView";
import slideshowPlay from "../video/slideshowPlay";
import playlists from "../video/playlists";
import PushView from "./pushView.vue";
export default {
  components: {
    playlists,
    slideshowPlay,
    pushView,
  },
  data() {
    return {
      playlistsRows: 6,
      pushViewRows: 2,
      updataList: [],
      newestList: [],
      playList: [
        {
          value: "内地mv",
          list: [],
        },
        {
          value: "港台mv",
          list: [],
        },
        {
          value: "欧美mv",
          list: [],
        },
        {
          value: "日本mv",
          list: [],
        },
        {
          value: "韩国mv",
          list: [],
        },
      ],
    };
  },
  mounted() {
    getRecommendMv("内地", 1, 20).then((res) => {
      const { data } = res;
      this.updataList = data.data;
      this.newestList = data.data;
    }),
      getNewestMV("内地", 10).then((res) => {
        const { data } = res;
        this.playList[0].list = data.data;
      }),
      getNewestMV("港台", 10).then((res) => {
        const { data } = res;
        this.playList[1].list = data.data;
      });
    getNewestMV("欧美", 10).then((res) => {
      const { data } = res;
      this.playList[2].list = data.data;
    });
    getNewestMV("日本", 10).then((res) => {
      const { data } = res;
      this.playList[3].list = data.data;
    });
    getNewestMV("韩国", 10).then((res) => {
      const { data } = res;
      this.playList[4].list = data.data;
    });
  },
  methods:{
    goMv(item){
      this.$router.push({path: '/videoView',query:{id:item.id}})
    }
  }
};
</script>
<style scoped>
#recommend {
  display: flex;
  background: #fff;
  flex-direction: column;
  justify-content: center;
}
#recommend .atUp {
  height: 100%;
  display: flex;
  justify-content: space-between;
}
#recommend .atUp > div {
  display: flex;
  justify-content: center;
}
#recommend .atUp > div:nth-child(1) {
  font-weight: bold;
  padding: 5px;
}
#recommend .atUp > div:nth-child(2) {
  border: 1px solid #ddd;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 5px;
  display: flex;
  justify-content: center;
}
#recommend .atUp > div:nth-child(2):hover {
  background: #ddd;
}
#recommend .atUp-music {
  width: 100%;
  display: flex;
  padding: 5px;
  margin: 5px;
  justify-content: space-around;
  box-sizing: border-box;
}
#recommend .atUp-music > div {
  width: 100px;
  border-radius: 5px;
}
</style>